var OrderForm = function () {
  var template = /*html*/ `
    <div class="order-form" v-loading.fullscreen.lock="loading">
      <div class="order-form-item" v-for="(laterPhaseDate,index) in laterPhaseDateList" :key="'order_item_'+index">
        <label>{{labelList[index]}}</label>
        <el-date-picker style="width:105px;" v-model="laterPhaseDate.date" format="yyyy-MM-dd" value-format="timestamp" :editable="false" :clearable="false"
          :picker-options="{disabledDate:function(time){return dateLimit(time,index);}}" :default-value="laterPhaseDate.defaultValue" size="small"></el-date-picker>
        <template v-if="index===laterPhaseDateList.length-1">
        <el-button v-if="index<3" style="margin-left:5px;" size="small" type="primary" @click="addDate(index)">添加</el-button>
        <el-button v-if="laterPhaseDate.canDel" size="small" type="danger" @click="deleteDate(index)">删除</el-button>
        </template>
      </div>
      <div style="height:32px;text-align:center;">
        <el-button @click="updateOrder" type="primary" size="small">修改</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      purchaseOrder: {
        type: Object,
        required: true
      }
    },
    watch: {
      purchaseOrder: function () {
        var order = this.purchaseOrder;
        this.laterPhaseDateList = order.getLaterPhaseDateList();
      }
    },
    data: function () {
      var order = this.purchaseOrder;
      var laterPhaseDateList = [];
      if (order !== null) {
        laterPhaseDateList = order.getLaterPhaseDateList();
      }
      return {
        loading: false,
        moment: moment,
        labelList: i18n.getValues('purchaseOrder.recoveryPhase'),
        laterPhaseDateList: laterPhaseDateList
      };
    },
    methods: {
      updateOrder: function () {
        var laterPhaseDateList = this.laterPhaseDateList;
        this.$emit('update-date', laterPhaseDateList);
      },

      addDate: function () {
        var laterPhaseDateList = this.laterPhaseDateList;
        var date = laterPhaseDateList[laterPhaseDateList.length - 1].date;
        if (date === '') {
          var label = this.labelList[laterPhaseDateList.length - 1];
          this.$message(`请输入${label}`);
          return;
        }
        laterPhaseDateList.push({
          date: '',
          readonly: false,
          canDel: true,
          defaultValue: date
        });
      },

      deleteDate: function () {
        var laterPhaseDateList = this.laterPhaseDateList;
        if (laterPhaseDateList.length === 0) {
          return;
        }

        laterPhaseDateList.splice(laterPhaseDateList.length - 1, 1);
      },

      dateLimit: function (time, index) {
        var laterPhaseDateList = this.laterPhaseDateList;
        var date = laterPhaseDateList[index];
        if (date === undefined) {
          return false;
        }
        var preDate = _.get(laterPhaseDateList, `[${index - 1}].date`);
        var nextDate = _.get(laterPhaseDateList, `[${index + 1}].date`);
        var now = moment().valueOf();

        if (!date.readonly) {
          if (preDate === undefined) {
            preDate = now;
          } else {
            preDate = _.max([preDate, now]);
          }
        }

        if (preDate !== undefined && preDate !== '') {
          if (moment(time).isBefore(preDate, 'day')) {
            return true;
          }
        }

        if (nextDate !== undefined && nextDate !== '') {
          if (moment(time).isAfter(nextDate, 'day')) {
            return true;
          }
        }
        return false;
      }
    },
    template: template
  };
}();